<template>
  <view>
    <guideStep :step="step"></guideStep>
    <!-- 顶部组件 -->
    <top></top>

    <customSwiper :swiper-list="swiperList" class="swiper" v-show="!isOpenMsCard" v-slot:itemslot="{item}">

      <view class="row">
        <text class="title">昵称：</text>
        <text class="swiper_text">{{item.username}}</text>
        <text class="title">性别：</text>
        <text class="swiper_text">{{item.sex?"女":"男"}}</text>
        <text class="title">地区：</text>
        <text class="swiper_text"
          style="margin-right: 0;">{{item.province=='上海'||'北京'||'天津'||'重庆'?item.city+item.district:item.province+item.city}}</text>


      </view>
      <view class="row">
        <text class="title">「申爱」寄语:</text>

      </view>
      <view class="row" style="max-height: 70rpx;overflow: auto;">

        <text class="swiper_text">{{item.content}}</text>

      </view>
      <view class="row">
        <text class="title">{{item.dateTime}}</text>


      </view>
    </customSwiper>
    <!-- 查看头像寄语浮窗 -->
    <view class="ms_bg" v-show="isOpenMsCard||isOpenCluster" catchtouchmove='true' @tap.stop="closeMsCard">
    </view>
    <view class="ms_box" v-show="isOpenMsCard">
      <view class="close" @tap.stop="closeMsCard">

        <uni-icons type="closeempty" size="15" color="#666"></uni-icons>

      </view>
      <view class="ms_portrait">

        <image :src="msInfo.userphoto" mode="aspectFill" :style="'border-color: var(--lv'+msInfo.grade+')'"/>


      </view>



      <image :src="msInfo.photo" mode="aspectFit" class="main_pic"></image>
      <view class="info_card">
        <view class="row">
          <text class="title">昵称：</text>
          <text class="swiper_text" :style="'color: var(--lv'+msInfo.grade+')'">{{msInfo.username}}</text>
          <text class="title">性别：</text>
          <text class="swiper_text">{{msInfo.sex?"女":"男"}}</text>
          <text class="title">地区：</text>
          <text class="swiper_text">{{msInfo.province+msInfo.city}}</text>


        </view>
        <view class="row">
          <text class="title">「申爱」寄语:</text>

        </view>
        <view class="row" style="max-height: 70rpx;overflow: auto;">
          <text class="swiper_text">{{msInfo.content}}</text>

        </view>
        <view class="row">
          <text class="title">{{msInfo.dateTime}}</text>

        </view>

      </view>

      <!-- <view class="close times">

        首次

      </view> -->

    </view>
    <!-- 查看头像寄语结束 -->


    <!-- 打卡浮窗 -->
    <view class="ms_bg" v-show="isOpenUpload" @tap.stop="closeUpload">
    </view>
    <view class="up_box" v-show="isOpenUpload">
      <view class="close" @tap.stop="closeUpload">

        <uni-icons type="closeempty" size="15" color="#666"></uni-icons>

      </view>
      <view class="ms_portrait">

        <image :src="msInfoPortrait" mode="aspectFill" />


      </view>



      <view class="up_title"> <text> 写下你的「申爱」寄语吧</text></view>

      <view class="up_textarea">
        <uni-easyinput type="textarea" v-model="uploadInfo.context" placeholder="请输入寄语" />
      </view>

      <view class="choose_ad" @tap="chooseAd">
        <text>{{isChooseUpAd?address_info.formatted_addresses.recommend:"选择地点"}} </text>
        <uni-icons v-show="!isChooseUpAd" type="forward" size="15" color="#bebebe"></uni-icons>



      </view>
      <view class="up_input">

        <uni-easyinput trim="all" v-model="uploadInfo.cdk" placeholder="打卡cdk码" />
      </view>
      <view class="up_pic">
        <!-- <uni-file-picker limit="1" title="支持扩展名: .jpg .png"></uni-file-picker> -->
        <uni-file-picker ref="refImg" file-extname="png,jpg" limit="1" :del-icon="false" disable-preview
          :imageStyles="imageStyles" file-mediatype="image" @select="select">
          <uni-icons type="plusempty" size="25" color="#bebebe"></uni-icons>

        </uni-file-picker>
        <view class="up_alert">支持扩展名: .jpg .png</view>

      </view>
      <view class="up_btn" @tap.stop="upSubmit">
        提交
      </view>

    </view>
    <!-- 打卡结束 -->

    <view class="right_button filled content1" @tap="openUpload">
      <uni-icons type="plusempty" size="30" color="#fff"></uni-icons>

    </view>

    <view class="left_up_button filled content3" @tap="nowAdress">
      <uni-icons type="location" size="30" color="#fff"></uni-icons>

    </view>




    <view class="left_button filled content2" @tap="openRank">
      <uni-icons type="vip" size="30" color="#fff"></uni-icons>

    </view>

    <!-- <uni-transition ref="ani" custom-class="transition" mode-class="fade" :styles="styles" :show="isOpenCluster"> -->
    <view class="test-view" v-show="isOpenCluster" :style="{ left: screenX + 'px', top: screenY + 'px' }">

      <uni-group mode="card">
        <view style=" display: flex;max-width: 200px;">
          <view style="height: 100rpx; margin-right: 10px;" v-for="item in  clusterinfoList" :key="item.id">

            <image :src="item.option.img" @tap.self="openMsCard(item)" class="info_picdiv_pic" />


          </view>
        </view>
      </uni-group>
    </view>
    <!-- </uni-transition> -->




    <map id="mapSelected" style="width: 100vw; height: 80vh" :latitude="latitude" :longitude="longitude"
      show-location="true" :markers="covers" :controls="controls" :scale="16" @callouttap.self="openMsCard"
      @controltap="controltap" @tap="clickMap" @regionchange="regionchange">
      <cover-view slot="callout">
        <block v-for="(item, index) in covers" :key="item.id">
          <cover-view class="customCallout" :marker-id="item.id">
            <cover-image :src="item.option.img"></cover-image>

          </cover-view>
        </block>
      </cover-view>

    </map>
    <view class="pop_mask" v-show="isOpenRank" @tap.self="closeRank">
    </view>
    <view class="map_box" v-show="isOpenRank">

      <rank ref="rank" v-if="rankReset"></rank>

    </view>



  </view>
</template>

<script>
  import top from "@/components/top.vue"
  import rank from "@/components/rank.vue"
  import customSwiper from '@/components/blackmonth-swiper/index'
  import {
    getSwiperRecord,
    getRecord,
    postRecord,
    getRecordDetail,
    uploadFile,
  } from "@/api/home.js";
  import {
    timeTransfer
  } from "@/utils/utils.js"
  import guideStep from "@/components/xky-guideStep/xky-guideStep.vue";
  export default {
    components: {
      top,
      customSwiper,
      rank,
      guideStep
    },
    data() {

      return {
        rankReset: true,
        uploadLoading: false,
        isOpenUpload: false,
        isOpenMsCard: false,
        isChooseUpAd: false,
        isOpenCluster: false,
        selectImg: {},
        userInfo: {},
        msInfoPortrait: "https://shenai-fducs.oss-cn-shanghai.aliyuncs.com/shenai_interface/logo.PNG",
        isOpenRank: false,
        uploadInfo: {
          context: "",
          cdk: ""
        },
        swiperTextStyle: {
          color: '#2979FF',
          borderColor: '#2979FF'
        },
        imageStyles: {
          width: 100,
          height: 80,
          border: {
            radius: 5
          }
        },
        step: {
          name: 'is_new',
          // repeat: true,
          guideList: [{
            el: '.content1',
            tips: '查看各省份打卡排名',
            style: "border-radius: 8rpx;margin: 0",
            next: "下一步"
          }, {
            el: '.content2',
            tips: '点击这里进行打卡',
            style: "border-radius: 8rpx;margin: 0",
          }, {
            el: '.content3',
            tips: '点击这里回到原位',
            style: "border-radius: 8rpx;margin: 0",
            next: "我知道啦"
          }]
        },
        msInfo: {
          name: '喜喜',
          sex: "",
          age: "14",
          text: "「申爱」寄语「申爱」寄语「申爱」寄语「申爱」「申爱」寄语「申爱」寄语「申爱」寄语「申爱」寄语「申爱」寄语寄语「申爱」寄语「申爱」寄语「申爱」寄语「申爱」「申爱」寄语「申爱」寄语「申爱」寄语「申爱」寄语「申爱」寄语寄语「申爱」寄语「申爱」寄语「申爱」寄语「申爱」「申爱」寄语「申爱」寄语「申爱」寄语「申爱」寄语「申爱」寄语寄语「申爱」寄语「申爱」寄语「申爱」寄语「申爱」「申爱」寄语「申爱」寄语「申爱」寄语「申爱」寄语「申爱」寄语寄语「申爱」寄语「申爱」寄语「申爱」寄语「申爱」「申爱」寄语「申爱」寄语「申爱」寄语「申爱」寄语「申爱」寄语",
          dateTime: "",
          image: "https://shenai-fducs.oss-cn-shanghai.aliyuncs.com/shenai_interface/logo.PNG"
        },
        swiperList: [{
          name: '喜喜',
          sex: 1,
          age: "14",
          text: "寄语「申爱」寄语寄语「申爱」寄语「申爱」寄语「申爱」寄语「申爱」「申爱」寄语「申爱」寄语「申爱」寄语「申爱」寄语「申爱」寄语寄语寄语「申爱」寄语「申爱」寄语「申爱」寄语「申爱」「申爱」寄语「申爱」寄语「申爱」寄语「申爱」寄语「申爱」寄语寄语寄语「申爱」寄语「申爱」寄语「申爱」寄语「申爱」「申爱」寄语「申爱」寄语「申爱」寄语「申爱」寄语「申爱」寄语寄语寄语「申爱」寄语「申爱」寄语「申爱」寄语「申爱」「申爱」寄语「申爱」寄语「申爱」寄语「申爱」寄语「申爱」寄语寄语「申爱」寄语「申爱」寄语「申爱」「申爱」寄语「申爱」寄语「申爱」寄语「申爱」寄语「申爱」寄语",
          dateTime: [2024, 6, 21, 21, 55, 43],
        }, {
          name: '喜喜1',
          sex: 1,
          age: "14",
          text: "寄语「申爱」寄语「申爱」寄语「申爱」寄语「申爱」寄语「申爱」寄语「申爱」寄语",
          dateTime: [2024, 6, 21, 21, 55, 43],
        }],
        screenX: 0, // 初始屏幕 X 坐标
        screenY: 0, // 初始屏幕 Y 坐标
        clusterX: 0,
        clusterY: 0,
        title: 'map',
        mapCtx: null,
        latitude: 31.34110894097223, // 默认纬度
        longitude: 121.50946967230905, // 默认经度(北京天安门)
        covers: [{
            id: 1,
            latitude: 31.34110894097223,
            longitude: 121.50946967230905,
            iconPath: '',
            joinCluster: true,
            width: "1",
            height: "1",
            alpha: 0,
            customCallout: {
              anchorY: 10,
              anchorX: 0,
              display: "ALWAYS"
            },
            option: {
              img: "https://shenai-fducs.oss-cn-shanghai.aliyuncs.com/shenai_interface/logo.PNG"
            }
          },
          {
            id: 3,
            latitude: 31.34110894097224,
            longitude: 121.50946967230905,
            iconPath: '',
            joinCluster: true,
            width: "1",
            height: "1",
            alpha: 0,
            customCallout: {
              anchorY: 10,
              anchorX: 0,
              display: "ALWAYS"
            },
            option: {
              img: "https://shenai-fducs.oss-cn-shanghai.aliyuncs.com/shenai_interface/logo.PNG"
            }
          },
          {
            id: 2,
            latitude: 31.34521894097323,
            longitude: 121.51957967231905,
            iconPath: '',
            joinCluster: true,
            width: "1",
            height: "1",
            // alpha:0,
            customCallout: {
              anchorY: 10,
              anchorX: 0,
              display: "ALWAYS"
            },
            option: {
              img: "https://shenai-fducs.oss-cn-shanghai.aliyuncs.com/shenai_interface/logo_with_name.PNG"
            }
          }
        ],
        clusterList: [],
        clusterinfoList: [],
        timer: null,
        isUpdate: false,
        controls: [{ // 控件
          id: 99,
          position: { // 控件位置
            left: 160,
            top: 120
          },
          iconPath: 'https://hellouniapp.dcloud.net.cn/static/location.png' // 控件图标
        }],
        address_info: {
          formatted_addresses: {
            recommend: ""
          }
        },
        address_info_recomd: "",
        address: "",
      }
    },



    onLoad(option) {
      this.userInfo = wx.getStorageSync('shenai_userInfo');
      this.msInfoPortrait = this.userInfo.avatarUrl;

      uni.$on('homeRefresh', (param) => {
        this.userInfo = wx.getStorageSync('shenai_userInfo');
        this.msInfoPortrait = this.userInfo.avatarUrl;
        // this.getSwiperList(); // 从第一页重新获取数据
      })
      this.nowAdress();
      // this.getSwiperList();
    },

    onReady() {
      this.mapCtx = uni.createMapContext("mapSelected", this); // 创建map的上下文对象, 从而操控map组件


      console.log("createMapContext");
      var that = this
      this.mapCtx.on("markerClusterClick", (e) => {
        console.log("markerClusterClick", e)
        that.clusterX = e.cluster.center.latitude;
        that.clusterY = e.cluster.center.longitude;
        that.clusterList = e.cluster.markerIds;

        this.mapCtx.getScale({
          success: function(scaleres) {
            console.log(scaleres)
            that.mapCtx.toScreenLocation({
              latitude: that.clusterX,
              longitude: that.clusterY,
              success: function(location) {
                console.log("location", location)
                that.screenX = location.x - 50;
                that.screenY = location.y - 70;
                if (scaleres.scale > 19) {

                  that.clusterinfoList = that.clusterList.map(id => that.covers.find(item => item.id ==
                    id));

                  that.isOpenCluster = true;
                }
              },
              fail: function(error) {
                console.log('获取屏幕位置失败：', error);
              }


            })
          },
          fail: function(error) {
            console.log('获取地图缩放级别失败：', error);
          }
        });



      });
    },

    onShow() {
      if (this.$refs.rank.rankRefresh) {
        this.rankReset = false;
        this.$nextTick(() => {
          this.rankReset = true;
          this.$refs.rank.changeRankRefresh();
        })
      }
      this.getSwiperList();
    },


    methods: {

      getSwiperList() {
        getRecord().then(res => {


          this.covers = res.data.data.map((el, index) => {

            //直接读取url
            return {
              id: el.id,
              latitude: el.latitude,
              longitude: el.longitude,
              iconPath: '',
              joinCluster: true,
              width: "1",
              height: "1",
              alpha: 0,
              customCallout: {
                anchorY: 10,
                anchorX: 0,
                display: "ALWAYS"
              },
              option: {
                img: el.userPhoto ||
                  "https://shenai-fducs.oss-cn-shanghai.aliyuncs.com/shenai_interface/logo.PNG"
              }
            }



          })



        })
        getSwiperRecord().then(res => {

          this.swiperList = res.data.data

          this.swiperList.forEach(el => {
            el.dateTime = timeTransfer(el.dateTime)
          })


        })


      },
      openMsCard(e) {
        console.log("openMsCard", e)
        this.isOpenMsCard = true;
        getRecordDetail(e.markerId || e.id).then(res => {
          this.msInfo = res.data.data
          this.msInfo.dateTime = timeTransfer(this.msInfo.dateTime)
        })

      },

      select(e) {
        this.selectImg = e;
      },
      openUpload(e) {
        this.isOpenUpload = true;

      },
      openRank() {
        this.isOpenRank = true;
      },
      closeRank() {
        this.isOpenRank = false;
      },
      closeUpload() {
        this.isOpenUpload = false;
      },
      async upSubmit() {
        if (this.uploadLoading) return;

        if (!this.uploadInfo.context) {
          uni.showToast({
            title: `请输入寄语`,
            icon: 'none'
          });
          return;
        }
        if (!this.isChooseUpAd) {
          uni.showToast({
            title: `请选择地点`,
            icon: 'none'
          });
          return;
        }
        if (!this.uploadInfo.cdk) {
          uni.showToast({
            title: `请输入cdk`,
            icon: 'none'
          });
          return;
        }

        if (Object.keys(this.selectImg).length == 0) {
          uni.showToast({
            title: `请上传图片`,
            icon: 'none'
          });
          return;
        }
        this.uploadLoading = true;
        // this.uploadInfo.address
        let province = this.address_info.address_component.province;
        if (this.address_info) {

          if (province.indexOf("内蒙古") != -1) {
            province = province.substr(0, 3)
          } else if (province.indexOf("区") != -1) {
            province = province.substr(0, 2)
          } else {
            province = province.replace("省", "");
            province = province.replace("市", "");
          }
          this.uploadInfo.province = province;
          this.uploadInfo.city = this.address_info.address_component.city;
          this.uploadInfo.district = this.address_info.address_component.district;


          this.uploadInfo.latitude = this.address_info.location.lat;
          this.uploadInfo.longitude = this.address_info.location.lng;

          // let imgObj = await uploadFile(this.selectImg);

          // this.uploadInfo.photo = imgObj.image;
          // this.uploadInfo.photo_check_trace_id = imgObj.photo_check_trace_id;
          let imgData = await uploadFile(this.selectImg);

          this.uploadInfo.photo = imgData;
          console.log("uploadInfo");
          console.log(this.uploadInfo);
          await postRecord(this.uploadInfo);
          this.uploadLoading = false;
          // this.isOpenUpload = false;
          // uni.reLaunch();

          // postRecord(this.uploadInfo).then(res => {
          this.isOpenUpload = false;
          // this.nowAdress(this.uploadInfo.latitude, this.uploadInfo.longitude);
          uni.$emit('needRefresh', true);
          uni.$emit('rankRefresh', true);

          this.selectImg = {}
          this.uploadInfo = {
              context: "",
              cdk: ""
            },
            this.getSwiperList();
          this.address_info = {};
          this.isChooseUpAd = false;
          this.$refs.refImg.clearFiles();
          this.showToast();
        }

      },


      showToast() {
        wx.setStorageSync('isShowToast', true),
          uni.switchTab({
            url: "/pages/drift_bottle/drift_bottle",
          })

      },
      nowAdress() {

        var that = this;

        uni.getLocation({
          type: 'gcj02', //返回可以用于uni.openLocation的经纬度
          success: function(res) {
            that.latitude = res.latitude;
            that.longitude = res.longitude;
            console.log(that.latitude, that.longitude);

          }
        });


      },
      closeMsCard() {
        if (this.isOpenMsCard)
          this.isOpenMsCard = false
        else
          this.isOpenCluster = false;

        //   this.timer = setInterval(() => {
        //     if(this.isOpenMsCard)
        // this.isOpenMsCard = false
        //   }, 100);

      },
      chooseAd() {
        this.isGetLocation();

      },
      isGetLocation(a = "scope.userLocation") { //检查当前是否已经授权访问scope属性
        var _this = this;
        uni.getSetting({
          success(res) {
            if (!res.authSetting[a]) { //每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
              _this.getAuthorizeInfo()
            } else {
              //方式一
              _this.getLocationInfo();
              // 方式二
              // _this.getLocation();
            }
          }
        });
      },
      getAuthorizeInfo(a = "scope.userLocation") { // uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
        var _this = this;
        uni.authorize({
          scope: a,
          success() { //允许授权
            //方式一
            // _this.getLocationInfo();
            // 方式二
            _this.getLocation();
          }
        })
      },
      //点击地图时
      clickMap(e) {

        if (!e.show) {
          this.$refs.rank.closeMap();
        }
        this.latitude = e.detail.latitude;
        this.longitude = e.detail.longitude;
      },
      getLocationInfo() {
        //直接调用即可
        uni.chooseLocation({
          success: (res) => {
            console.log('chooseLocation');
            console.log(res);

            if (res.errMsg == "chooseLocation:ok") {
              this.latitude = res.latitude;
              this.longitude = res.longitude;
              this.getLocationDetail(res);
            }
          }
        })
      },
      //获取当前所在位置的经纬度
      getLocation() {
        uni.getLocation({
          type: 'gcj02',
          success: (res) => {
            this.latitude = res.latitude.toString()
            this.longitude = res.longitude.toString()

            // 获取地理位置详情信息
            // this.getLocationDetail(res)
          }
        });
      },
      //根据经纬度获取详细的地址
      getLocationDetail() {
        uni.request({
          header: {
            "Content-Type": "application/text"
          },
          url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + this.latitude + ',' + this.longitude +
            '&key=OU4BZ-4MKEB-GNQUP-J5ZUM-FUGXT-FOBMU',
          // '&key=XOXBZ-MZWWD-CDX4H-PONXN-UA5PJ-D7FJN',
          success: (re) => {
            //成功获取到经纬度
            console.log(re)
            if (re.statusCode == 200) {
              this.address_info = re.data.result;
              this.isChooseUpAd = true;
              this.address = re.data.result.address

            } else {
              uni.showToast({
                title: '获取地理位置失败，请重试',
                icon: "none"
              })
            }
          }
        });
      },

      // getLocationDetail(re){
      //   console.log('getLocationDetail')
      //   console.log(re)
      //   this.address_info = re.data.result;
      //           this.isChooseUpAd = true;
      //           this.address = re.data.result.address
      // },
      // 在地图渲染更新完成时触发
      regionchange(e) {

        if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {

          this.mapCtx.getCenterLocation({
            success: (res) => {
              this.latitude = res.latitude;
              this.longitude = res.longitude;
              // this.getLocationDetail();
            }
          })
        }
      },
    }
  }
</script>
<style lang="scss">
  .swiper {
    font-size: 27rpx;


    .title {
      color: #999999;
    }

    .swiper_text {
      margin-right: 45rpx;
    }

    .row {
      margin-bottom: 15rpx;
    }
  }

  .customCallout {
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0px 4rpx 16px 0px rgba(189, 191, 193, 0.4);
    border-radius: 50%;
    display: inline-flex;
    padding: 4rpx;
    justify-content: center;
    align-items: center;
    height: 60px;
    width: 60px;
    color: #2A7BE2;

    cover-image {
      height: 100%;
      width: 100%;
      border-radius: 50%;
    }

  }


  .right_button {

    position: absolute;
    z-index: 99;
    // background-color: white;
    right: 5rpx;
    border-radius: 50%;
    top: calc(100% - 90rpx);

  }

  .left_up_button {

    position: absolute;
    z-index: 99;
    // background-color: white;
    left: 5rpx;
    border-radius: 50%;
    top: 420rpx;

  }

  .left_button {
    position: absolute;
    z-index: 99;
    right: 5rpx;
    // right:20rpx;
    border-radius: 50%;
    top: 420rpx;

  }

  .filled {
    height: 40px;
    width: 40px;
    background-color: #ff7f6a;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 2rpx 2rpx 10rpx #999999;
  }




  .ms_box {
    font-size: 27rpx;
    position: absolute;
    z-index: 999;
    background-color: white;
    padding: 20rpx 20rpx 0;
    bottom: 0rpx;
    border-radius: 12rpx;

    box-shadow: 2rpx 2rpx 10rpx #999999;
    height: 580rpx;
    width: calc(100vw - 60rpx);
    overflow: hidden;
    left: 0;
    right: 0;
    margin: 0 auto;


    // position: relative;

    .title {
      color: #999999;
    }

    .swiper_text {
      margin-right: 50rpx;
    }

    .row {
      margin-bottom: 15rpx;
    }

    .main_pic {
      height: 280rpx;
      width: 550rpx;
      object-fit: contain;
      position: fixed;
      right: 35rpx;
      margin-top: 40rpx;
      border-radius: 12rpx;



    }

    .up_title {
      height: 60rpx;
      width: 330rpx;
      position: fixed;
      right: 167rpx;
      margin-top: 40rpx;
      font-weight: bold;
      border-radius: 30rpx;
      background-color: #f6f6f6;
      text-align: center;

      text {
        vertical-align: middle;
        line-height: 60rpx;
      }
    }



    .up_pic {}

    .close {
      position: fixed;
      right: 30rpx;
    }

    .times {
      height: 40rpx;
      width: 70rpx;
      background-color: #999999;
      color: #fff;
      bottom: 10rpx;
      text-align: center;
      border-radius: 0 0 10rpx 0;

    }



    .info_card {
      // position: fixed;
      margin: 350rpx 20rpx 0;
      // height: 300rpx;
    }

    .ms_portrait {
      height: 130rpx;
      width: 130rpx;
      position: fixed;
      left: 50rpx;
      z-index: 1;


      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        border-color: #fff;
        box-shadow: 2rpx 2rpx 10rpx #707070;
        border: 1px solid #fff;
      }
    }
  }



  .up_box {
    font-size: 27rpx;
    position: absolute;
    z-index: 999;
    background-color: white;
    padding: 20rpx 20rpx 0;
    bottom: 0rpx;
    border-radius: 12rpx;

    box-shadow: 2rpx 2rpx 10rpx #999999;
    height: 780rpx;
    width: calc(100vw - 60rpx);
    overflow: hidden;
    left: 0;
    right: 0;
    margin: 0 auto;


    // position: relative;

    .title {
      color: #999999;
    }

    .swiper_text {
      margin-right: 50rpx;
    }

    .row {
      margin-bottom: 15rpx;
    }

    .main_pic {
      height: 280rpx;
      width: 570rpx;
      object-fit: contain;
      position: fixed;
      right: 35rpx;
      margin-top: 40rpx;
    }

    .up_title {
      height: 60rpx;
      width: 330rpx;
      position: fixed;
      right: 167rpx;
      margin-top: 40rpx;
      font-weight: bold;
      border-radius: 30rpx;
      background-color: #f6f6f6;
      text-align: center;

      text {
        vertical-align: middle;
        line-height: 60rpx;
      }
    }

    .up_textarea {
      margin-top: 170rpx;

      // height: 140rpx;
      .uni-easyinput__content-textarea {
        height: 120rpx;
        min-height: 120rpx;
      }
    }

    .up_input {
      margin-top: 20rpx;
    }

    .up_pic {
      margin-top: 20rpx;
      display: flex;
      position: relative;

      .up_alert {
        // height: 60rpx;
        position: absolute;
        bottom: 10rpx;
        margin-left: 100px;
        font-size: 12px;
        color: #999999;
      }


    }

    .choose_ad {
      margin-top: 20rpx;
      height: 70rpx;
      border-radius: 7rpx;
      border: 1px solid #e5e5e5;
      display: flex;
      padding: 0 20rpx;
      justify-content: space-between;

      text {
        vertical-align: middle;
        line-height: 70rpx;
      }


    }

    .up_btn {
      background-color: #ff7f6a;
      height: 70rpx;
      text-align: center;
      line-height: 70rpx;
      color: #fff;
      border-radius: 10rpx;
      margin-top: 20rpx;


    }

    .close {
      position: fixed;
      right: 30rpx;
    }

    .times {
      height: 40rpx;
      width: 70rpx;
      background-color: #999999;
      color: #fff;
      bottom: 10rpx;
      text-align: center;
      border-radius: 0 0 10rpx 0;

    }



    .info_card {
      // position: fixed;
      margin: 350rpx 20rpx 0;
      // height: 300rpx;
    }

    .ms_portrait {
      height: 130rpx;
      width: 130rpx;
      position: fixed;
      left: 50rpx;
      z-index: 1;


      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        border-color: #fff;
        border: 1px solid #fff;
        box-shadow: 2rpx 2rpx 10rpx #707070;
      }
    }
  }

  .ms_bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0);
    z-index: 10;

  }

  .map_box {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 999;
    height: 90vh;
    width: 80vw;
  }

  .pop_mask {
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100vh;
    width: 100vw;
    z-index: 99;
  }

  .test-view {
    position: absolute;

    z-index: 99;


  }

  .uni-group__content {
    max-width: 220px;
    overflow-x: auto;
  }

  .info_picdiv_pic {
    height: 90rpx;
    width: 90rpx;
    border-radius: 50%;
    border-color: #fff;
    border: 1px solid #fff;
    box-shadow: 2rpx 2rpx 10rpx #707070;
  }
</style>